<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="../css/reset.css">
</head>

<body>
    <!--header-->
    <div id="header">
        <div class="header-con">
            <h1>
                <a href="#"><img src="../images/logo.png" alt=""></a>
            </h1>
        </div>
    </div>
    <!--content-->
    <div id="content">
        <div class="content-con">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input type="text" name="username"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="password"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>确认密码：</td>
                    <td><input type="password" name="repassword"></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="注册" class="btn"></td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script src="../lib/promiseAjax.js"></script>
<script src="../lib/jquery-3.4.1.min.js"></script>
<script>
    var btn = document.querySelector(".btn");
    btn.onclick = function() {
        var username = document.querySelector("[name='username']").value.trim();
        var password = document.querySelector("[name='password']").value.trim();
        var repassword = document.querySelector("[name='repassword']").value.trim();

        if (username == "") {
            document.querySelector("[name='username']").parentElement.nextElementSibling.innerText = "用户名不可为空";
            return false;
        }
        if (password == "") {
            document.querySelector("[name='password']").parentElement.nextElementSibling.innerText = "密码不可为空";
            return false;
        }
        if (repassword == "") {
            document.querySelector("[name='repassword']").parentElement.nextElementSibling.innerText = "请确认密码";
            return false;
        }
        if (repassword != password) {
            document.querySelector("[name='repassword']").parentElement.nextElementSibling.innerText = "两次密码不一致";
            return false;
        }
        promiseAjax({
            type: "post",
            url: "../php/register.php",
            data: {
                username: username,
                password: password
            }
        }).then(function(res) {
            console.log(res)
            if (res.status == 200) {
                alert(res.msg);
                location.href = "./logoin.html";
            } else {
                alert(res.msg);
                return;
            }
        });

        // $.post('../php/register.php',{username,password},(res)=>{
        //     console.log(res);
        //     const res1 = JSON.parse(res);
        //     if (res1.status === 200) {
        //                 alert(res1.msg);
        //                 location.href = "./logoin.html";
        //             } else {
        //                 alert(res1.msg);
        //                 return;
        //             }
        // })

    }
</script>

</html>